<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const arr = [
        {
          path: '/main',
          name: '首页',
          component: 'main'
        },
        {
          path: '/acl',
          name: '权限管理',
          component: 'Layout',
          children: [
            {
              path: 'user/list',
              name: '用户管理',
              component: 'acl/user/list'
            },
            {
              path: 'role/list',
              name: '角色管理',
              component: 'acl/role/list'
            },
            {
              path: 'menu/list',
              name: '菜单管理',
              component: 'acl/menu/list'
            }
          ]
        }
      ]

      const finalRouteList = []
      function getRouteList(routes) {
        let routeList = []
        routes.forEach((item, index) => {
          const { path, name } = item
          const route = {
            path,
            name,
            component: () =>
              import(
                /* webpackChunkName: "list" */ `../views/${item.component}.vue`
              )
          }
          routeList.push(route)
          if (item.children && item.children.length) {
            route.children = getRouteList(item.children)
            route.component = () =>
              import(/* webpackChunkName: "list" */ `../${item.component}.vue`)
            route.redirect = `/${item.children[0].component}`
            finalRouteList.push(route)
          }
        })
        return routeList
      }

      const res = getRouteList(arr)
      console.log(res)
    </script>
  </body>
</html>
